<template>
  <div class="add-outbound-agent">
    <div class="form-content">
      <a-form :model="formState" ref="formDataRef" name="basic" :label-col="{ style: 'width:145px' }" :wrapper-col="{ style: 'calc(100% - 145px)' }" autocomplete="off">
        <a-spin :spinning="loading">
          <div class="title">基础信息</div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="代理名称" name="name" :rules="[{ required: true, message: '请填写代理名称!' }]">
                <a-input v-model:value="formState.name" :maxlength="10" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="代理编码" name="code" :rules="[{ required: true, message: '请填写代理编码!' }]">
                <a-input v-model:value="formState.code" :maxlength="10" @keyup="validateZhInputHandle($event, formState, ['code'])" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="省市区" name="addressModel" :rules="[{ required: true, message: '请选择省市区!' }]">
                <a-cascader
                  @change="changeAddressHandle"
                  v-model:value="formState.addressModel"
                  :fieldNames="{ label: 'name', value: 'code', children: 'child' }"
                  :options="areaOpts"
                  showSearch
                  placeholder="请选择"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="详细地址" name="address" :rules="[{ required: false, message: '请填写详细地址型!' }]">
                <a-textarea v-model:value="formState.address" placeholder="请输入" show-count :maxlength="100" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="账期" name="accountId" :rules="[{ required: true, message: '请选择账期!' }]">
                <a-select v-model:value="formState.accountId" placeholder="请输入">
                  <a-select-option v-for="item in accountOpts" :key="item.id" :label="item.accountName" :value="item.id">{{ item.accountName }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="交货类型" name="deliveryType" :rules="[{ required: true, message: '请选择交货类型!' }]">
                <a-radio-group v-model:value="formState.deliveryType">
                  <a-radio :value="1">需送货</a-radio>
                  <a-radio :value="2">无需送货</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <div class="title">仓库联系信息</div>
            <a-row :gutter="16" v-for="(item, index) in formState.bizOutWarehouseBrokerContactList" :key="index">
              <a-col :span="10">
                <a-form-item label="联系人" :name="['bizOutWarehouseBrokerContactList', index, 'contact']" :rules="[{ required: true, message: '请填写联系人!' }]">
                  <a-input v-model:value="item.contact" :maxlength="20" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <a-form-item label="联系电话" :name="['bizOutWarehouseBrokerContactList', index, 'phone']" :rules="[{ required: true, message: '请填写联系电话!' }]">
                  <a-input v-model:value="item.phone" :maxlength="20" @keyup="validateZhInputHandle($event, item, ['phone'])" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-button style="margin-right: 16px" type="primary" @click="addHandle"><plus-outlined /></a-button>
                <a-button type="danger" @click="deleteHandle(index)" v-if="formState.bizOutWarehouseBrokerContactList.length !== 1 && index !== 0"><rest-outlined /></a-button>
              </a-col>
              <a-col :span="10">
                <a-form-item label="省市区" :name="['bizOutWarehouseBrokerContactList', index, 'addressModel']" :rules="[{ required: true, message: '请选择省市区!' }]">
                  <a-cascader
                    v-model:value="item.addressModel"
                    @change="(value: Array<string>, selectedOptions: Array<Base.GeneraDataType>,) => changeWarehouseAddressHandle(value, selectedOptions, item)"
                    :fieldNames="{ label: 'name', value: 'code', children: 'child' }"
                    :options="areaOpts"
                    showSearch
                    placeholder="请选择"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <a-form-item label="详细地址" :name="['bizOutWarehouseBrokerContactList', index, 'address']" :rules="[{ required: true, message: '请填写详细地址型!' }]">
                  <a-textarea v-model:value="item.address" placeholder="请输入" show-count :maxlength="50" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-row>

          <div class="title">配置信息</div>
          <a-row :gutter="16">
            <a-col :span="10">
              <a-form-item label="代理域名" name="domainName" :rules="[{ required: false, message: '请填写代理域名!' }]">
                <a-input v-model:value="formState.domainName" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :offset="14"></a-col>
            <template v-for="(item, index) in formState.companyKeyList" :key="index">
              <a-col :span="10">
                <a-form-item label="公司" :name="['companyKeyList', index, 'companyId']" :rules="[{ required: false, message: '请选择公司!' }]">
                  <a-select v-model:value="item.companyId" placeholder="请输入" @change="(value:string,selectedOptions:OutBoundAgent.SelectOptions)=>changeCompany(value, selectedOptions, index)">
                    <a-select-option v-for="item in companyOpts" :key="item.id" :label="item.shortName" :value="item.id">{{ item.shortName }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="10">
                <a-form-item label="ApiKey" :name="['companyKeyList', index, 'companyKey']" :rules="[{ required: false, message: '请填写ApiKey!' }]">
                  <a-input v-model:value="item.companyKey" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-button style="margin-right: 16px" type="primary" @click="addCompanyKeyListHandle"><plus-outlined /></a-button>
                <a-button type="danger" @click="deleteCompanyKeyListHandle(index)" v-if="formState.companyKeyList.length !== 1 && index !== 0"><rest-outlined /></a-button>
              </a-col>
            </template>
          </a-row>
        </a-spin>
      </a-form>
    </div>
    <div class="operation-wrapper">
      <a-button v-debounce :loading="loading" type="primary" @click="submitHandle">保 存</a-button>
      <a-button @click="resetHandle">取 消</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getOutBoundAgentInfoApi } from "@/api/configCenter/outBoundAgent/index";
import { PlusOutlined, RestOutlined } from "@ant-design/icons-vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { toRefs, watch } from "vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: OutBoundAgent.ListRows;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData, type } = toRefs(props);
const { formDataRef, formState, loading, areaOpts, getAreaOpts, accountOpts, getAccountOpts, getCompanyOpts, companyOpts } = InitHook();
const {
  submitHandle,
  resetHandle,
  validateZhInputHandle,
  addHandle,
  deleteHandle,
  changeWarehouseAddressHandle,
  changeAddressHandle,
  addCompanyKeyListHandle,
  deleteCompanyKeyListHandle,
  changeCompany
} = OperationHook({
  formDataRef,
  formState,
  loading,
  passData,
  type,
  emit,
  accountOpts
});
const init = () => {
  if (type.value === 2) {
    loading.value = true;
    getOutBoundAgentInfoApi(passData.value.id)
      .then((res: any) => {
        const { code, data } = res;
        if (code === 200) {
          Object.assign(formState, data);
          formState.addressModel = [data.provinceCode, data.cityCode, data.areaCode];
          formState.bizOutWarehouseBrokerContactList = data.bizOutWarehouseBrokerContactList.map((t: any) => {
            return {
              ...t,
              addressModel: [t.provinceCode, t.cityCode, t.areaCode]
            };
          });
          if (!data.companyKeyList) {
            formState.companyKeyList = [
              {
                companyName: "",
                companyId: "",
                companyKey: ""
              }
            ];
          }
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }
  getAreaOpts();
  getAccountOpts();
  getCompanyOpts();
};
init();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    }
  }
);
</script>
<style lang="stylus" scoped>
.add-outbound-agent{
    padding-bottom: 50px;
    .title{
        font-weight: 600;
        font-size: 16px;
    }
    .operation-wrapper{
      position: absolute;
      background-color: #fff;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 12px 0;
      text-align: center;
      box-shadow: 1px 1px 5px #ccc;
      z-index: 99;
      :deep(.ant-btn-primary){
        margin-right: 12px;
      }
    }
}
</style>
